<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script></script>
	<body>
		<input type="file" id="f1">
		<span id="s"></span>
		<img src="" id="img"/>
		<script>
			var f1=document.querySelector("#f1");
			if(typeof FileReader=='undefined')
			{
					var text=document.querySelector("#s");
					text.innerHTML="你的浏览器不支持filereader"
					f1.setAttribute("disabled","disabled");
			}
			f1.onchange=function(){
				var fl1=this.files[0];
				var freader=new FileReader();
				//读取文件
				//开始读取文件的加载事件
				var imgfile;
				freader.onload=function(e){
					alert("文件读取完成");
					var imgfile=e.target.result;
					console.log(imgfile);
					
				document.getElementById("img").src=imgfile;
					var str={
						img:imgfile
					}
					localStorage.setItem("img",JSON.stringify(str));
				};
				
				freader.readAsDataURL(fl1);
			
			}
			window.onload=function(){
				var data=localStorage.getItem("img");
				var img=JSON.parse(data);
				document.getElementById("img").src=img.img;
			}
		</script>
	</body>
</html>
